<template>
  <div class="listContainer">
    <swiper indicator-dots indicator-color="pink" indicator-active-color="green">
      <swiper-item>
        <img src="/static/images/detail/carousel/01.jpg" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/detail/carousel/02.jpg" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/detail/carousel/03.jpg" alt="">
      </swiper-item>
      <swiper-item>
        <img src="/static/images/detail/carousel/04.jpg" alt="">
      </swiper-item>
    </swiper>
      <div>
        <ListTmp v-for="(item,index) in listTmp" :key="index" :item="item" :index="index"/>
      </div>
    </div>
</template>

<script>
    /**
    *mapState 辅助函数
    *当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
    *为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
    */
    import {mapState} from 'vuex'
    import ListTmp from '../list_template/list_template.vue'
    export default {
        name: "list",
        components:  {ListTmp},
        beforeMount(){
          // 分发action修改状态
          this.$store.dispatch('getList')
        },
        computed:{
          /*映射状态到本组件*/
          ...mapState(['listTmp'])
        }
    }
</script>



<style scoped>
  .listContainer swiper {
    width: 100%;
    height: 400rpx;
  }

  .listContainer swiper img {
    width: 100%;
    height: 100%;
  }
</style>
